<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户信息</title>
		<%@ include file="/WEB-INF/layouts/detail-header.jsp" %>
		<script src="${staticPath}/commons/echarts/echarts.js" type="text/javascript"></script>
		<style type="text/css">
			.wrapper-content {
				padding: 20px;
				background: #f3f3f4;
				font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
				font-size: 13px;
				color: #676a6c;
			}
			.text-center {
				width:80%;
				margin:0 auto;
				margin-bottom:30px;
			}
			label.userinfo-lbl {
				font-weight:normal;
				width:90px;
				display: inline-block;
			}
			.contact-box {
				background-color: #FCFCFC;
				border: 1px solid #d8dbdd;
				padding: 20px;
				margin-bottom: 20px;
			}
			.contact-box a {
				color: inherit;
			}
			a {
				cursor: pointer;
			}
			.m-t-xs {
				margin-top: 5px;
			}
			.img-circle {
				border-radius: 50%;
			}
			.img-responsive {
				width:100%;
			}
			.m-t-xs {
				margin-top: 5px;
			}
			.font-bold {
				font-weight: 600;
			}
			h3, h4, h5 {
				margin-top: 5px;
				font-weight: 600;
			}
			h3 {
				font-size: 16px;
			}

			.form-group {
				padding-top:20px !important;
				padding-bottom: 20px !important;
				/*border-top:none !important;*/
			}
			.label-detail {
				font-weight: normal;
			}
		</style>

	</head>
	<body style="padding-top:20px;">

		<div class="create-page tpanel">

			<div class="panel-content">
				<div class="container-fluid">
					<div class="col-sm-4">
						<div class="contact-box" onclick="detail('+ row.id +')">
							<div class="col-sm-12">
								<div class="text-center">
									<img alt="image" class="img-circle m-t-xs img-responsive"
										 src="${staticPath}/app/image/default_headimg.jpg"/>
									<c:choose>
										<c:when test="${entity.role eq 'Admin'}">
											<div class="m-t-xs font-bold">管理员</div>
										</c:when>
										<c:otherwise>
											<div class="m-t-xs font-bold">普通用户</div>
										</c:otherwise>
									</c:choose>
								</div>

								<h3><label class="userinfo-lbl">姓名：</label><strong>${entity.realName}</strong></h3>
								<p><label class="userinfo-lbl">用户名：</label>${entity.username}</p>
								<p><label class="userinfo-lbl">性别：</label>${entity.gender}</p>
								<p><label class="userinfo-lbl">电话：</label>${entity.tel}</p>
								<p><label class="userinfo-lbl">邮箱：</label>${entity.email}</p>
								<p><label class="userinfo-lbl">注册时间：</label><fmt:formatDate value="${entity.createdTime}" pattern="yyyy-MM-dd HH:mm" /></p>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="col-sm-8" style="margin-bottom: 15px;">
						<a class="btn btn-default" href="javascript:window.history.back();">返回</a>
						<a class="btn btn-default" href="${ctx}/admin/app-user/update?id=${entity.id}">编辑</a>
						<a class="btn btn-default" href="${ctx}/admin/app-user/reset-password?id=${entity.id}">重置密码</a>

                        <c:choose>
                            <c:when test="${entity.role eq 'Admin'}">
                                <a class="btn btn-default" href="javascript:changeRole('${entity.id}','Admin');">取消管理员</a>
                            </c:when>
                            <c:otherwise>
                                <a class="btn btn-default" href="javascript:changeRole('${entity.id}','Normal');">设为管理员</a>
                            </c:otherwise>
                        </c:choose>

						<a class="btn btn-danger" href="javascript:deleteUser();">删除</a>
					</div>
					<div class="col-sm-8">
						<div class="contact-box" style="padding:8px;">
							<ul id="myTab" class="nav nav-tabs">
								<li class="active">
									<a href="#base-settings" data-toggle="tab">客户端信息</a>
								</li>
								<li>
									<a href="#dailyActiveUsers" data-toggle="tab">活跃情况</a>
								</li>
								<li>
									<a href="#base-settings" data-toggle="tab">消息推送</a>
								</li>
							</ul>
							<div id="myTabContent" class="tab-content" style="background: #FFF;">
								<div class="tab-pane fade in active" id="base-settings">
									<c:forEach items="${appClients}" var="appClient">
										<div class="panel panel-default">
											<div class="panel-heading">
													${appClient.app}
											</div>
											<div class="panel-body">

										<form id="baseSettingsForm" class="form-horizontal">
											<div class="form-group form-group-first">
												<label class="col-sm-3 control-label">APP平台</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">${appClient.platform}</label>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">APP版本号</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">${appClient.appVersion}</label>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">终端系统信息</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">${appClient.terminal}</label>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">访问凭证</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">${appClient.token}</label>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">语言</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">${appClient.language eq null ? '默认' : appClient.language}</label>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">最后活跃时间</label>
												<div class="col-sm-8">
													<label class="control-label label-detail">
															<fmt:formatDate value="${appClient.lastActiveTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
													</label>
												</div>
											</div>
										</form>

											</div>
										</div>
									</c:forEach>
								</div>
								<div class="tab-pane fade in" id="dailyActiveUsers">
									<div class="panel panel-default">
										<div class="panel-heading">
											按年统计活跃情况
										</div>
										<div class="panel-body">
											<div id="yearDau" style="height:400px;margin:0 auto;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript">
            window.parent.changeTitle('用户信息');
			function deleteUser() {
                topBootbox.prompt({
                    title: '请输入管理密码确认删除此用户',
                    onEscape : true,
                    backdrop : true,
                    animate : true,
                    buttons: {
                        confirm: {
                            label: '删除',
                            className: 'btn-danger'
                        },
                        cancel: {
                            label: '取消',
                            className: ''
                        }
                    },
                    inputType: 'password',
                    callback: function (result) {
                        if(result) {
                            $.post('${ctx}/admin/app-user/careful-delete',{id:'${entity.id}',password:result},function(resp) {
                                if(resp.code == 'OK') {
                                    window.parent.layer.msg('删除成功', {icon: 1});
                                    window.parent.changeUrl('${ctx}/admin/app-user');
                                }else {
                                    window.parent.layer.msg('删除失败:' + resp.message, {icon: 2});
                                }
                            },'json');
                        }
                    }
                });
			}


            /**
             * 获取用户一年的日活跃情况
             */


			$(function() {
                $('#yearDau').width($('#myTabContent').width() - 80);
                var yearDau = echarts.init(document.getElementById('yearDau'));
				$.get('${ctx}/admin/app-user/year-dau', {appUserId : '${entity.id}'}, function(r) {
                    var option = {
                        tooltip: {
                            position: 'top'
                        },
                        visualMap: {
                            min: 0,
                            max: 1,
                            calculable: true,
                            orient: 'horizontal',
                            left: 'left',
                            top: 'top'
                        },

                        calendar: [],

                        series: []
                    };
				    if(r.code == 'OK') {
				        var c = 0;
				        for(var i in r.body) {
                            option.calendar.push({
								top: 200 * c + 100,
                                range: i,
                                cellSize: ['auto', 10]
                            });
                            var data = [];
                            for(var j in r.body[i]) {
                                var ele = r.body[i][j];
								data.push([j,ele]);
							}

                            option.series.push({
                                type: 'heatmap',
                                coordinateSystem: 'calendar',
                                calendarIndex: c,
                                data: data
                            });
                            c ++;
						}
					}
                    yearDau.setOption(option);
				}, 'json');
            });

            function changeRole(id,auth) {
                topBootbox.prompt({
                    title: '请输入管理密码确认此操作',
                    onEscape : true,
                    backdrop : true,
                    animate : true,
                    buttons: {
                        confirm: {
                            label: '确认',
                            className: 'btn-danger'
                        },
                        cancel: {
                            label: '取消',
                            className: ''
                        }
                    },
                    inputType: 'password',
                    callback: function (result) {
                        if(result) {
                            $.post('${ctx}/admin/app-user/changeRole',{"id":id,"auth":auth,"adminPassword":result},function(resp) {
                                if(resp.code == 'OK') {
                                    window.parent.layer.msg('设置成功', {icon: 1});
                                    window.parent.changeUrl('${ctx}/admin/app-user');
                                }else {
                                    window.parent.layer.msg('设置失败:' + resp.message, {icon: 2});
                                }
                            },'json');
                        }
                    }
                });
            }

		</script>
	</body>
</html>
